<script setup>
    import axios from 'axios';
    import { ref } from 'vue';
    import { reactive } from 'vue';
    import WordCard from './WordCard.vue';

    const word = ref("");
    const resSearch = reactive({
        word:"",
        dst:"",
    });
    
    function searchWord(){
        axios.post('http://127.0.0.1:5001/searchWord',{
            queryWord:word.value
        },{
            headers:{
               'Content-Type':'application/x-www-form-urlencoded'
            }
        })
        .then(function (response) {
            resSearch.word = response.data.trans_result[0].src;//这么写主要是不想让显示框里的词resWord和输入框里的词word动态绑定，希望点击搜索按钮后再改变值
            resSearch.dst = response.data.trans_result[0].dst;
            // console.log(resSearch);
        })
        .catch(function (error) {
            console.log(error);
        });
        
    }
</script>

<template>
    <div>
        <input class="queryinput neon-input" v-model="word">
        <button class="searchbtn neon-btn" @click="searchWord">搜索</button>
        <WordCard v-if="resSearch.dst.length > 0" :wordInfo="resSearch" :buttonType="0"></WordCard>
    </div>
</template>

<style scoped>
    .queryinput {
        width: 80%;
        border-radius: 15px 0px 0px 15px;
        margin-right: 1%;
    }
    .searchbtn {
        width: 15%;
        border-radius: 0px 15px 15px 0px;
    }
</style>